<template>
    <div id="submit-left">
        <!-- 标题 -->
        <h1 class="title">{{ currentSubject?.id }}.{{ currentSubject?.subjectTitle }}</h1>
        <!-- 题目难度和标签 -->
        <div class="item">
            <el-button type="text">
                <el-icon><i class="el-icon-s-home"></i></el-icon>
                <span>{{ getOjSubjectDifficultEnumByCode(currentSubject?.difficult || 1).description }}</span>
            </el-button>
            <el-button type="info" v-for="tag in limitTagList(currentSubject?.labelList || [])">
                <span>{{ tag.labelTitle }}</span>
            </el-button>
        </div>
        <!-- 题目内容 -->
        <div class="text item">
            {{ currentSubject?.detailDescription }}
        </div>
        <!-- 提示内容 -->
        <div class="tips-box item">
            <li v-for="tip in parseSubjectTipList(currentSubject?.subjectTip || '[]')">{{ tip }}</li>
        </div>
        <!-- 提交数、通过数、通过率 -->
        <div class="stats-container">
            <div class="stat-item">
                <span class="stat-label">通过次数</span>
                <span class="stat-value">{{ currentSubject?.acceptCount }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">提交次数</span>
                <span class="stat-value">{{ currentSubject?.submitCount }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">通过率</span>
                <span class="stat-value">{{ calculatePassRate(currentSubject?.acceptCount ||
                    0, currentSubject?.submitCount || 0) }}%</span>
            </div>
        </div>
        <!-- 点赞和收藏 -->
        <div class="thumb-collect">
            <el-button class="thumb" :class="{ 'is-thumb': isThumb }" style="cursor: pointer;"
                @click="subjectThumbDebounce(null)" :loading="isClick" :disabled="isClick">
                👍<span>118</span>
            </el-button>
            <el-button class="collect" style="margin-left:2rem;cursor: pointer;">
                ⭐ <span>118</span>
            </el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getOjSubjectDifficultEnumByCode } from '@/common/OjConstant';
import { subjectApi } from '@/request';
import { useOjStores } from '@/stores/ojStores';
import type { ojLable } from '@/typedefined/Label';
import { debounce } from '@/utils/CommonUtils';
import { ElButton, ElIcon } from 'element-plus';
import { storeToRefs } from 'pinia';
import { ref, watchEffect } from 'vue';

const ojStores = useOjStores();
const { currentSubject } = storeToRefs(ojStores);

// 是否点赞标志位
const isThumb = ref<boolean>(false);
// 锁标志位，防止异步带来的数据不一致
const lock = ref<boolean>(true);
// 点击标志位，防止用户重复请求
const isClick = ref<boolean>(false);


// 标签列表长度限制函数
function limitTagList(labelList: Array<ojLable>): Array<ojLable> {
    if (!labelList) return [];
    return labelList.filter((_, index) => index < 3);
}

// 题目提示json字符串数组解析
function parseSubjectTipList(tipListStr: string): Array<string> {
    if (!tipListStr) return [];
    return JSON.parse(tipListStr);
}

// 计算通过率
function calculatePassRate(acceptCount: number, submitCount: number): string {
    if (!acceptCount || !submitCount) return '0';
    return (acceptCount / submitCount * 100).toFixed(2);
}

// 点赞按钮防抖函数封装
const subjectThumbDebounce = debounce(subjectThumb, 250);

// 题目点赞
async function subjectThumb() {
    try {
        isClick.value = true;
        // 当前题目数据未获取或者锁标志有效时不执行操作
        if (!currentSubject.value?.id || lock.value) return;
        if (isThumb.value) return await cancelThumb();
        // 返回布尔值，正常返回的话，一定是成功了的
        await subjectApi.oj.subjectThumb(currentSubject.value.id);
        isThumb.value = true;
    }
    finally{
        isClick.value = false;
    }
}

// 取消点赞
async function cancelThumb() {
    // 返回布尔值，正常返回的话，一定是成功了的
    await subjectApi.oj.cancelThumb(currentSubject.value?.id || 0) as unknown as boolean;
    isThumb.value = false;
}

// 监听当前题目数据的变化，查询用户是否点赞
watchEffect(async () => {
    if (currentSubject.value?.id) {
        await isExistThumb();
        lock.value = false;
    }
});

// 查询是否点赞
async function isExistThumb() {
    // 返回布尔值，true表示点赞了，false表示未点赞
    const res = await subjectApi.oj.isExistThumb(currentSubject.value?.id || 0) as unknown as boolean;
    isThumb.value = res;
}

</script>

<style scoped>
#submit-left {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 -2px 2px rgba(0, 0, 0, 0.05);
    font-family: Arial, sans-serif;
    color: #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 10px;
    height: 100%;
}

.item {
    padding-bottom: 30px;
}

.title {
    text-decoration-line: none;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: text;
    outline: none;
    touch-action: manipulation;
    color: inherit;
    text-decoration: inherit;
}

.text {
    margin-bottom: 1rem;
    margin: 0;
}

.stats-container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 20px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label {
    font-size: 14px;
    color: #666;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.thumb-collect {
    padding-top: 15px;
    display: flex;
    user-select: none;
}

.is-thumb {
    background-color: #409EFF;
    color: white;
}
</style>